<template>
  <div class="Homebackground">
    <div class="leftBodyBlank"></div>
    <div class="tBody">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="line-height: 16px; font-size: 16px; padding: 12px 0"
      >
        <el-breadcrumb-item :to="{ path: '/Home/Index' }" style=""
          ><img
            style="width: 20px; height: 20px; margin-top: -4px"
            src="../../assets/images/homepage_24.png"
        /></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Home/Index' }"
          >论坛</el-breadcrumb-item
        >
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="userStyle">
        <div class="leftBodyNav">
          <el-menu
            :default-active="index"
            class="el-menu-vertical-demo"
            background-color="#6699cc"
            text-color="#fff"
            active-text-color="#00ffff"
          >
            <el-menu-item index="1" @click="goUser(1)">
              <span slot="title">我的资料</span>
            </el-menu-item>
            <el-menu-item index="2" @click="goUser(2)">
              <span slot="title">我的消息</span>
            </el-menu-item>
            <el-menu-item index="3" @click="goUser(3)">
              <span slot="title">我的帖子</span>
            </el-menu-item>
            <el-menu-item index="4" @click="goUser(4)">
              <span slot="title">我的评论</span>
            </el-menu-item>
            <el-menu-item index="3" @click="goUser(5)">
              <span slot="title">我的收藏</span>
            </el-menu-item>
            <el-menu-item index="5" @click="goUser(6)">
              <span slot="title">修改资料</span>
            </el-menu-item>
            <el-menu-item index="6" @click="goUser(7)">
              <span slot="title">修改密码</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="rightBody">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: sessionStorage.getItem("user"),
    };
  },
  methods: {
    goUser(index) {
      if (index === 1) {
        this.$router.push("/Home/User/Info");
      } else if (index === 2) {
        this.$router.push("/Home/User/News");
      } else if (index === 3) {
        this.$router.push("/Home/User/Topic");
      } else if (index === 4) {
        this.$router.push("/Home/User/Comment");
      } else if (index === 5) {
        this.$router.push("/Home/User/Collection");
      } else if (index === 6) {
        this.$router.push("/Home/User/UpdateInfo");
      } else if (index === 7) {
        this.$router.push("/Home/User/UpdatePass");
      }
    },
    checkULogin() {
      var msg = "${sessionScope.user.username}";
      if (!msg) {
        var returnVal = window.confirm("未登录或登录已失效！请登录！", "提示");
        if (returnVal) {
          location.href = "login.jsp";
        }
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
.Homebackground {
  width: 1004px;
  margin: 0 auto;
  min-height: 800px;
  background-color: #f5f5f5;
}

.topNav {
  float: left;
}

.leftBodyBlank {
  width: 22px;
  min-height: 100px;
  float: left;
}

.tBody {
  width: 960px;
  font-family: 微软雅黑;
  float: left;
}

.userStyle {
  width: 960px;
  margin-top: 15px;
  float: left;
  font-size: 14px;
  /* border: 1px solid #C2D5E3; */
  min-height: 400px;
}

.leftBodyNav {
  width: 140px;
  max-height: 450px;
  float: left;
  padding: 0px 25px 0px 15px;
}

.leftBodyNavStyle {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  float: left;
  border-bottom: 1px solid white;
  background-color: #a2c1de;
}

.leftBodyNavStyle:hover {
  background-color: #89adce;
  color: white;
}

.leftBodyNavDown {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: bolder;
  float: left;
  color: white;
  /* border-bottom: 1px solid white; */
  background-color: #7ea5c6;
}

.rightBody {
  background-color: white;
  width: 778px;
  max-height: 450px;
  float: left;
  /* border-left: 1px solid #C2D5E3; */
}

.content {
  width: 778px;
  float: left;
  background-color: white;
}

.butt {
  background-color: #6699cc;
  width: 100px;
  height: 30px;
  border: 0;
  color: white;
  font-size: 18px;
}

.butt:hover {
  background-color: #71aae3;
  border: 0;
}

.leftBodyNav a:link,
.leftBodyNav a:hover,
.leftBodyNav a:active,
.leftBodyNav a:visited,
.leftBodyNav a:focus {
  text-decoration: none;
}
</style>